<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">{{ data.text }}</span>
        </div>

        <div class="img-btn-con">
            <draggable v-model="data.data.catArr" animation="200" item-key="id">
                <template #item="{ element, index }">
                    <div class="cat-sel-con" @mouseover="element.showClose = true" @mouseleave="element.showClose = false">
                        <div class="cls-between">
                            <el-button :icon="ShoppingBag" color="#4B93FA" plain size="small">{{ element.title }} </el-button>
                            <el-icon color="#bbb" :size="20" v-if="element.showClose" style="cursor: pointer" @click="del_cat(index)">
                                <CircleCloseFilled />
                            </el-icon>
                        </div>
                        <el-divider style="margin: 10px 0" />
                        <div class="cls-flex">
                            <div class="label-con">商品数量:</div>
                            <div>{{ element.count }}个</div>
                        </div>
                        <div class="cls-flex" style="padding-top: 0.5rem">
                            <div class="label-con">显示商品:</div>
                            <div style="width: 4rem">
                                <el-input v-model="element.limit" oninput="value=value.replace(/[^\d]/g,'')" />
                            </div>
                            <div style="padding-left: 0.52rem">个</div>
                        </div>
                        <div class="cls-flex" style="padding-top: 0.5rem">
                            <div class="label-con">菜单名称:</div>
                            <div>
                                <el-input v-model="element.label" clearable />
                            </div>
                        </div>
                    </div>
                </template>
            </draggable>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div style="min-width: 5rem">选择分组</div>
                <div style="flex: 1">
                    <el-tree-select
                        ref="catComp"
                        v-model="dataObj.cat"
                        :data="dataObj.catArr"
                        :render-after-expand="false"
                        show-checkbox
                        check-on-click-node
                        :check-strictly="false"
                        clearable
                    />
                </div>
                <div>
                    <el-button type="primary" text :disabled="!dataObj.cat" @click="add_cat">添加 </el-button>
                </div>
            </div>
            <div>列表样式</div>
            <div class="cls-flex">
                <div v-for="(type, i) in dataObj.typeArr" :key="i" class="type-con" @click="type_change(i)">
                    <img :src="i == data.style.styleType ? type.imgSel : type.img" style="width: 50px; height: 50px; border: 1px solid #e0e0e0" />
                    <div :style="i == data.style.styleType ? 'color: #4B93FA;' : ''">{{ type.title }}</div>
                </div>
            </div>
            <!-- <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">标题行数</div>
                <div class="cls-between">
                    <div class="item-con" :class="data.style.titleMore == 1 ? 'item-con-active' : ''" @click="data.style.titleMore = 1">一行</div>
                    <div class="item-con" :class="data.style.titleMore == 2 ? 'item-con-active' : ''" @click="data.style.titleMore = 2">两行</div>
                </div>
            </div> -->
            <div class="cls-between" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">文本样式</div>
                <div class="cls-between">
                    <div class="item-con" :class="data.style.weight == 500 ? 'item-con-active' : ''" @click="data.style.weight = 500">常规</div>
                    <div class="item-con" :class="data.style.weight > 500 ? 'item-con-active' : ''" @click="data.style.weight = 600">加粗</div>
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem" v-if="data.data.catArr.length > 1">
                <div class="label-con" style="flex: 1">标签标题选中颜色</div>
                <div>
                    <el-color-picker v-model="data.style.tabActiveColor" @change="color_change('tabActiveColor', '#333')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem" v-if="data.data.catArr.length > 1">
                <div class="label-con" style="flex: 1">标签标题默认颜色</div>
                <div>
                    <el-color-picker v-model="data.style.tabInitColor" @change="color_change('tabInitColor', '#646566')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem" v-if="data.data.catArr.length > 1">
                <div class="label-con" style="flex: 1">标签底部条颜色</div>
                <div>
                    <el-color-picker v-model="data.style.tabLineColor" @change="color_change('tabLineColor', '#ee0a24')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 0.5rem">
                <div class="label-con" style="flex: 1">供应商信息</div>
                <div>
                    <el-switch v-model="data.style.showSupp" width="60px" size="large" inline-prompt active-text="显示" inactive-text="隐藏" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">价格颜色</div>
                <div>
                    <el-color-picker v-model="data.style.price_color" @change="color_change('price_color', '#0ac393')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">购买按钮</div>
                <div>
                    <el-switch v-model="data.style.showBuy" width="60px" size="large" inline-prompt active-text="显示" inactive-text="隐藏" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">页面边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-left']" :max="max" @change="padding_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model="data.rpxStyle['margin-left']" @input="padding_change" />
                </div>
            </div>

            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-top']" :min="0" :max="300" @change="mtt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-top']" @input="mtt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-bottom']" :min="0" :max="300" @change="mtb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-bottom']" @input="mtb_change" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from "vue"
import { Search, CircleCloseFilled, ShoppingBag } from "@element-plus/icons-vue"
import { useRouter } from "vue-router"
import draggable from "vuedraggable"
import i1 from "@assets/design/one0.png"
import i2 from "@assets/design/one.png"
import i3 from "@assets/design/two0.png"
import i4 from "@assets/design/two.png"
import i5 from "@assets/design/three0.png"
import i6 from "@assets/design/three.png"

const { proxy } = getCurrentInstance()
const router = useRouter()

/** 商品相关数据data */
const dataObj = reactive({
    /**布局类型 */
    typeArr: [
        { title: "一行一个", img: i1, imgSel: i2 },
        { title: "一行两个", img: i3, imgSel: i4 },
        // {title:'一行三个',img:i5,imgSel:i6},
    ],
    /**分类列表 */
    catArr: [],
    cat: "",
})
const catComp = ref(null)
const max = 16 // 最大值，适用于内外边距和圆角

/**
 * 商品分组
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 4,
            type_name: "pdcGroup",
            text: "商品分组",
            data: {
                catArr: [],
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
            },
        },
    },
})

const type_change = (index) => {
    props.data.style.styleType = index
    if (index == 0) {
        props.data.rpxStyle["margin-left"] = 0
    } else {
        props.data.rpxStyle["margin-left"] = 14
    }
}

onMounted(() => {
    proxy.$axios1
        .get("/api/product/cate")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                result.map((val) => {
                    val.label = val.title
                    val.value = val.cate_id
                    // val.children &&
                    //     val.children.map((val1) => {
                    //         val1.label = val1.title
                    //         val1.value = val1.cate_id
                    //     })
                })
                dataObj.catArr = result
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {})
})

const req_pdc = (cat) => {
    proxy.$axios1
        .get(props.data.data.reqUrl + "?limit=" + cat.limit + "&cate_id=" + cat.cate_id)
        .then((r) => {
            let res = r.data
            if (res.code == 0) {
                res.data.map((val) => {
                    val.img = proxy.imgUrl + val.product_img + "!img_400"
                })
                cat.count = res.count
                cat.pdcArr = res.data
                props.data.data.data = res.data
                props.data.data.catArr = JSON.parse(JSON.stringify(props.data.data.catArr))
                props.data.data.cate_id = cat.cate_id
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
const add_cat = () => {
    let cat = catComp.value.getCheckedNodes()[0]
    cat.limit = 6 //默认显示6个
    props.data.data.catArr.push(cat)
    req_pdc(cat)
}
/**删除分类 */
const del_cat = (index) => {
    props.data.data.catArr.splice(index, 1)
    if (props.data.data.catArr.length) {
        props.data.data.cate_id = props.data.data.catArr[0].cate_id
        props.data.data.data = props.data.data.catArr[0].pdcArr
    } else {
        props.data.data.data = []
        props.data.data.cate_id = 0
    }
}

/** 确认选中的商品 */
const submit_pdc = () => {
    let rows = multipleTableRef.value.getSelectionRows()
    let pdcs = props.data.data.data
    if (!pdcs.length || !pdcs[0].product_id) {
        props.data.data.data = rows
    } else {
        rows.length && push(rows)
    }
    dataObj.showPop = false
}

const padding_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["margin-left"] = props.data.rpxStyle["margin-right"] = Number(val)
}
/** 前往商品管理页面 */
const to_shopview = () => {
    window.open("/#/Goods/GoodsList")
}

// 上下边距
const mtt_change = (val) => {
    props.data.rpxStyle["margin-top"] = Number(val)
}
const mtb_change = (val) => {
    props.data.rpxStyle["margin-bottom"] = Number(val)
}

/**
 * 当点击清空颜色时，恢复默认颜色
 * @param {*} key 要修改的颜色字段
 * @param {*} color 默认颜色， 当key值为null时，恢复默认颜色
 */
const color_change = (key, color) => {
    if (!props.data.style[key]) {
        props.data.style[key] = color
    }
}
</script>

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-button + .el-button {
    margin-left: 0 !important;
}

.el-button {
    border-radius: 0 !important;
}

.editor-title {
    padding: 24px 16px;
    border-bottom: 1px solid #f2f4f6;
    display: flex;
}

.editor-title__name {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
}

.set-tip {
    color: #969799;
    padding: 8px 0;
}

.img-btn-con {
    background-color: #fff;
    padding: 16px;
}

.img-btn {
    border: 1px solid #4b93fa;
    padding: 9px 16px;
    background: #fff;
    color: #4b93fa;
    border-radius: 2px;
    cursor: pointer;
}

.item-con {
    color: #323232;
    padding: 7px 14px;
    border: 1px solid #ebedf0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: #969799;
}

/* .close-btn {
    position: absolute;
    top: 0;
    cursor: pointer;
    right: 0;
} */

.select-btn {
    height: 40px;
    line-height: 40px;
    background: rgba(21, 91, 212, 0.03);
    border: 1px dashed rgba(21, 91, 212, 0.3);
    border-radius: 2px;
    margin: 0 16px 32px;
    text-align: center;
    cursor: pointer;
    color: #4b93fa;
}

/* .table-header{
    background: #4B93FA !important;
    height: 100px;
} */
.pdc-sort-con {
    background: #f7f7f7;
    padding: 0 16px;
    margin-bottom: 16px;
}

.sort-item {
    padding: 8px 8px 0 0;
    position: relative;
}

.type-con {
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 12px;
    color: #999;
    cursor: pointer;
}

.cat-sel-con {
    background: #f7f7f7;
    padding: 12px;
    margin-bottom: 12px;
}
</style>
